﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人力资源管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        body{
            overflow: hidden;
        }
        /* 全局布局样式 */
        .app-container {
            min-height: 100vh;
            position: relative;
            background-image: url('uploads\2025\06\19\20250619143644885.png'); /* 替换为实际背景图片路径 */
            background-repeat: no-repeat;
            background-position: right top;
            background-size: contain;
            background-color: #f1c40f;
            
        }

        /* 顶部导航栏样式 */
        .header {
            height: 60px;
            background-color: #f1c40f;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-size: 24px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 16px;
        }

        .logout-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }



        /* 左侧菜单样式 */
        .left-menu {
            width: 200px;
            height: calc(100vh - 60px);
            background-color: #f9f3d3;
            position: fixed;
            overflow-y: auto;
            padding-top: 20px;
            
        }

        .menu-list {
            list-style: none;
        }

        .menu-item {
            padding: 8px 20px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

            .menu-item:hover {
                background-color: #e67e22;
                color: white;
            }

        .sub-menu {
            padding-left: 20px;
            display: none;
        }

        /* 通过 v-show 控制显示 */
        .menu-item.active > .sub-menu {
            display: block;
        }

        .sub-sub-menu {
            padding-left: 20px;
            display: none;
        }

        .sub-menu-item.active > .sub-sub-menu {
            display: block;
        }

        /* 三级菜单样式 */
        .sub-sub-menu-item {
            padding: 4px 10px;
        }

            .sub-sub-menu-item:hover {
                background-color: #f39c12;
                color: white;
            }

        .sub-sub-menu-link {
            display: block;
            padding: 4px 10px;
            text-decoration: none; /* 去除下划线 */
            color: inherit; /* 继承父级颜色 */
        }

            .sub-sub-menu-link:hover {
                background-color: #f39c12;
                color: white;
            }
        /* 内容区域样式 */
        .content-container {
            margin-left: 200px; /* 左侧菜单宽度 */
            padding: 20px;
            background-color: #fff;
            min-height: calc(100vh - 60px);
        }
    </style>
</head>


<body>
    <div id="app">
        <div class="app-container">
            <!-- 顶部导航栏 -->
            <div class="header">
                <span class="header-title">人力资源管理系统</span>
                <div class="user-info">
                    <span>欢迎你：zhangsan(经理)</span>
                    <button class="logout-btn" v-on:click="handleLogout">退出系统</button>
                </div>
            </div>

            <!-- 左侧菜单 -->
            <div class="left-menu">
                <ul class="menu-list">
                    <li v-for="(mainItem, mainIndex) in menuData" :key="mainIndex"
                        class="menu-item" :class="{ active: mainItem.isOpen }">
                        <span v-on:click="toggleSubMenu(mainIndex)">{{ mainItem.title }}</span>
                        <ul v-show="mainItem.isOpen" class="sub-menu">
                            <li v-for="(subItem, subIndex) in mainItem.children" :key="subIndex"
                                class="sub-menu-item" :class="{ active: subItem.isOpen }">
                                <span v-on:click="toggleSubSubMenu(mainIndex, subIndex)">{{ subItem.title }}</span>
                                <!-- 三级菜单增加点击事件 -->
                                <ul v-show="subItem.isOpen" class="sub-sub-menu">
                                    <li v-for="(subSubItem, subSubIndex) in subItem.children" :key="subSubIndex" class="sub-sub-menu-item">
                                        <a v-on:click.prevent="loadPage(subSubItem.href)" :href="subSubItem.href || '#'" class="sub-sub-menu-link">
                                            {{ subSubItem.title }}
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <!-- 内容区域 -->
            <div class="content-container">
                <!-- 使用iframe加载页面（推荐方式，避免XSS风险） -->
                <iframe v-if="currentUrl" :src="currentUrl" frameborder="0" style="width: 100%; height: calc(100vh - 80px);"></iframe>
                <!-- 备用的innerHTML方式（存在XSS风险，谨慎使用） -->
                <!-- <div v-html="currentContent" v-else></div> -->
            </div>
        </div>
    </div>

    <script type="text/javascript">
                const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const menuData = ref([
                    {
                        title: '招聘管理',
                        isOpen: false,
                        children: [
                            {
                                title: '职位发布管理',
                                isOpen: false,
                                children: [
                                    { title: '职位发布登记', href: '/Text/insert' },
                                    { title: '职位发布变更',href:'/Text/Update' },
                                    { title: '职位发布查询',href:'/Text/Index1' }
                                ]
                            },
                            {
                                title: '简历管理',
                                isOpen: false,
                                children: [
                                    { title: '简历登记',href:'/engage/engage_resume' },
                                    { title: '简历筛选',href:'/engage/resumechoose' },
                                    { title: '有效简历查询',href:'/engage/resumechoosecx' }
                                ]
                            },
                            {
                                title: '面试管理',
                                isOpen: false,
                                children: [
                                    { title: '面试结果登记',href:'/engage/interviewlist'},
                                    { title: '面试筛选',href:'/engage/interview' }
                                ]
                            },
                            {
                                title: '录用管理',
                                isOpen: false,
                                children: [
                                    { title: '录用申请',href:'/engage/register_list'},
                                    { title: '录用审批',href:'/engage/check_list' },
                                    { title: '录用查询',href:'/engage/list' }
                                ]
                            }
                        ]
                    },
                    {
                        title: '人力资源档案管理',
                        isOpen: false,
                        children: [{
                             title: '人力资源档案管理',
                                isOpen: false,
                                children: [
                                   { title: '人力资源档案登记 ',href:'/humanResources/human_register'},
                                   { title: '人力资源档案登记复核' ,href:'/Home/Index2'},
                                   { title: '人力资源档案查询' },
                                   { title: '人力资源档案变更' },
                                ]
                        },
                                {
                                title: '人力资源档案删除管理',
                                isOpen: false,
                                children: [
                                    { title: '人力资源档案删除',href:'/humanResources/human_register' },
                                    { title: '档案删除恢复' },
                                    { title: '人力资源档案永久删除' }
                                ]
                            }
                        ]
                    },
                    {
                        title: '薪酬标准管理',
                        isOpen: false,
                        children: [
                            { title: '薪酬标准登记' },
                            { title: '薪酬标准登记复核' },
                            { title: '薪酬标准查询' },
                            { title: '薪酬标准变更' }
                        ]
                    },
                    {
                        title: '薪酬发放管理',
                        isOpen: false,
                        children: [
                            { title: '薪酬发放登记' },
                            { title: '薪酬发放登记复核' },
                            { title: '薪酬发放查询' }
                        ]
                    },
                    {
                        title: '调动管理',
                        isOpen: false,
                        children: [
                            { title: '调动登记' },
                            { title: '调动审核' },
                            { title: '调动查询' }
                        ]
                    },
                    {
                        title: '客户化设置',
                        isOpen: false,
                        children: [
                            {
                                title: '人力资源档案管理设置',
                                isOpen: false,
                                children: [
                                    { title: 'Ⅰ级机构设置' ,href:'/config/file_first_kind'},
                                    { title: 'Ⅱ级机构设置' ,href:'/config/config_file_second_kind'},
                                    { title: 'Ⅲ级机构设置'  ,href:'/config/config_file_third_kind'},
                                    { title: '职称设置' ,href:'/config/config_major'},
                                    { title: '职位分类设置' ,href:'/config/config_major_kind'},
                                    { title: '职位设置' ,href:'/config/config_major1'},
                                    { title: '公共属性设置' ,href:'/config/config_public_char' }
                                ]
                            },
                            {
                                title: '薪酬管理设置',
                                isOpen: false,
                                children: [
                                    { title: '薪酬项目设置' },
                                    { title: '薪酬发放方式设置' }
                                ]
                            },
                            {
                                title: '其他设置',
                                isOpen: false,
                                children: [
                                    { title: '关键字查询设置' }
                                ]
                            }
                        ]
                    },
                    {
                        title: '标准数据报表',
                        isOpen: false,
                        children: [
                            { title: 'Excel标准数据报表' },
                            { title: 'Pdf标准数据报表' },
                            { title: 'Xml标准数据报表' }
                        ]
                    },
                    {
                        title: '权限管理',
                        isOpen: false,
                        children: [
                            { title: '用户管理' },
                            { title: '角色管理' }
                        ]
                    }
                ]);
                const currentUrl = ref('');
                const activeMenu = ref(null); // 新增：记录激活的菜单

                // 加载页面方法（使用iframe方式）
                const loadPage = (url, menuPath) => {
                    if (!url) return;
                    currentUrl.value = url;
                    activeMenu.value = menuPath; // 记录激活的菜单路径

                    // 不关闭所有菜单，只关闭非激活的菜单
                    menuData.value.forEach(mainItem => {
                        mainItem.isOpen = false;
                        mainItem.children.forEach(subItem => {
                            subItem.isOpen = false;
                            subItem.children.forEach(subSubItem => {
                                if (subSubItem.href === url) {
                                    // 找到对应的菜单并展开
                                    const mainIndex = menuData.value.findIndex(m => m.children.some(s =>
                                        s.children.some(ss => ss.href === url)));
                                    const subIndex = menuData.value[mainIndex].children.findIndex(s =>
                                        s.children.some(ss => ss.href === url));

                                    if (mainIndex !== -1 && subIndex !== -1) {
                                        menuData.value[mainIndex].isOpen = true;
                                        menuData.value[mainIndex].children[subIndex].isOpen = true;
                                    }
                                }
                            });
                        });
                    });
                };

                // 保持原有的菜单切换逻辑不变
                const toggleSubMenu = (index) => {
                    menuData.value.forEach((item, i) => i !== index && (item.isOpen = false));
                    menuData.value[index].isOpen = !menuData.value[index].isOpen;
                };

                const toggleSubSubMenu = (mainIndex, subIndex) => {
                    menuData.value[mainIndex].children.forEach((item, i) => i !== subIndex && (item.isOpen = false));
                    menuData.value[mainIndex].children[subIndex].isOpen = !menuData.value[mainIndex].children[subIndex].isOpen;
                };

                const handleLogout = () => {
                    alert('退出系统成功');
                };

                onMounted(() => {
                    // 初始化时展开第一个菜单（可选）
                    
                });

                return {
                    menuData,
                    currentUrl,
                    activeMenu,
                    loadPage,
                    toggleSubMenu,
                    toggleSubSubMenu,
                    handleLogout
                };
            }
        });


        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>